<template>
  <div class="my-container">
    <el-row :gutter="20">
      <el-col :span="6">
        <project-card class="user-card" :features="featureData"></project-card>
      </el-col>
      <el-col :span="18">
        <el-card>
          <el-tabs v-model="activeName">
            <el-tab-pane label="功能" name="feature">
              <feature :features="featureData" />
            </el-tab-pane>
            <el-tab-pane label="章节" name="chapter">
              <chapter />
            </el-tab-pane>
            <el-tab-pane label="作者" name="author">
              <author />
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import ProjectCard from './components/ProjectCard.vue'
import Feature from './components/Feature.vue'
import Chapter from './components/Chapter.vue'
import Author from './components/Author.vue'
import { userFeature } from '@/api/user'
const featureData = ref([])
const activeName = ref('feature')
// 获取项目功能数据
const getFeatureData = async () => (featureData.value = await userFeature())
getFeatureData()
</script>

<style scoped></style>
